<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>符嘉月</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="nav-card">
        <div class="nav-container">
            <a href="#education">📖 教育</a>
            <a href="#projects">💻 项目</a>
            <a href="#skills">🛠️ 技能</a>
            <a href="#contact">📱 联系</a>
        </div>
    </nav>

    <!-- 页眉带照片 -->
    <header class="header-frame">
        <div class="profile-container">
            <img src="photo.jpg" alt="符嘉月简历照" class="profile-photo">
            <div>
                <h1>符嘉月</h1>
                <p>求职意向：Web前端开发工程师 | 期望薪资 8k-10k</p>
                <div class="status-badge">⌛ 30天内到岗</div>
            </div>
        </div>
    </header>

    <main class="container">
        <!-- 教育背景 -->
        <section id="education" class="info-card">
            <h2 class="section-title">🎓 教育背景</h2>
            <div class="content-frame main-border">
                <div class="timeline-item">
                    <h3>海南经贸职业技术学院</h3>
                    <div class="detail-box">
                        <span class="time-badge">2023.09 - 至今</span>
                        <p>软件技术（大专） | 专业排名：7/136</p>
                        <p class="highlight">主修课程: Java编程、数据库原理、Web开发、数据结构与算法、网页制作基础任务教程、python快速编程入门、JavaScript+jQuery程序设计开发实战、人工智能基础等</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 项目经历 -->
        <section id="projects" class="info-card">
            <h2 class="section-title">🚀 项目经历</h2>
            <div class="content-frame main-border">
                <div class="project-card accent-border">
                    <div class="card-header">
                        <h3>电商网站开发</h3>
                        <span class="score-badge">96/100</span>
                    </div>
                    <div class="tech-stack">
                        <span>HTML5</span>
                        <span>CSS3</span>
                        <span>JavaScript</span>
                    </div>
                    <ul class="project-detail">
                        <li>独立开发4个核心页面（首页/列表页/详情页/登录页）</li>
                        <li>实现商品分类筛选、用户评价交互功能</li>
                        <li>使用Flex布局实现响应式设计，加载速度优化30%</li>
                    </ul>
                </div>
            </div>
        </section>

        <!-- 专业技能 -->
        <section id="skills" class="info-card">
            <h2 class="section-title">🔧 专业技能</h2>
            <div class="content-frame grid-2col main-border">
                <div class="skill-card accent-border">
                    <h3>技术栈</h3>
                    <ul class="skill-list">
                        <li>HTML5/CSS3 <progress value="85" max="100"></progress></li>
                        <li>JavaScript <progress value="75" max="100"></progress></li>
                        <li>Vue框架 <progress value="65" max="100"></progress></li>
                        <li>DIV+CSS布局 <progress value="90" max="100"></progress></li>
                    </ul>
                </div>
                
                <div class="skill-card accent-border">
                    <h3>认证与荣誉</h3>
                    <ul class="cert-list">
                        <li>📜 全国计算机一级证书</li>
                        <li>🏅 信息素养大赛三等奖</li>
                        <li>🎖️ 2023-2024学年奖学金</li>
                        <li>🗣️ 普通话二级乙等</li>
                    </ul>
                </div>
            </div>
        </section>

        <!-- 联系信息 -->
        <section id="contact" class="info-card">
            <h2 class="section-title">📞 联系信息</h2>
            <div class="content-frame grid-3col main-border">
                <div class="contact-item accent-border">
                    <div>📱 手机</div>
                    <a href="tel:13976831049">139-7683-1049</a>
                </div>
                <div class="contact-item accent-border">
                    <div>📧 邮箱</div>
                    <a href="mailto:3036889416@qq.com">3036889416@qq.com</a>
                </div>
                <div class="contact-item accent-border">
                    <div>🏫 院校</div>
                    <span>海南经贸职业技术学院官网：</span>
                    <a href="https://hceb.edu.cn/">https://hceb.edu.cn/</a>
                </div>
                <div class="contact-item accent-border">
                    <div>😶‍🌫️源代码仓库地址</div>
                    <a href="https://gitee.com/yue20050911/my-profile_1.git">https://gitee.com/yue20050911/my-profile_1.git</a>
                </div>
            </div>
        </section>
        <button class="print-btn" onclick="window.print()">🖨️ 打印简历</button>

    </main>

    <footer class="footer-card">
        <div class="footer-content">
            © 2024 符嘉月 
        </div>
    </footer>
</body>
</html>